<template>
	<view class="mainbgc">
		<header-top :messageInfo="{typeFlag:true,message:'员工详情'}"></header-top>
		<!-- 时间选择器 -->
		<u-datetime-picker :show="show" v-model="value1" mode="date" @cancel="show=false" @confirm="confirm">
		</u-datetime-picker>
		<view class="mainpadding_top ffffff">
			<view class="selecttime selectborder flexcenter radius" @click="show = true">
				<text>{{timevalue}}</text>
				<view class="timeicon"></view>
			</view>
			<!-- 日期选择器 -->

		</view>
		<!-- 图表 -->
		<view class="charts-box  ffffff">
			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
		</view>
		<!-- 数据 -->
		<view class="ffffff all-message mainpadding">
			<view class="flexbetween">
				<text>姓名</text>
				<text>{{dataAll.name}}</text>
			</view>
			<view class="flexbetween fourten">
				<text>本月收入</text>
				<text>{{dataAll.yue}}元</text>
			</view>
			<view class="flexbetween fourten">
				<text>本年收入</text>
				<text>{{dataAll.nian}}元</text>
			</view>
			<view class="flexbetween fourten">
				<text>总收入</text>
				<text>{{dataAll.shouru}}元</text>
			</view>
			<view class="flexbetween fourten">
				<text>客户数</text>
				<text>{{dataAll.kehu}}名</text>
			</view>
			<view class="flexbetween fourten">
				<text>公司排名</text>
				<text>{{dataAll.paiming_gs}}名</text>
			</view>
			<view class="flexbetween fourten">
				<text>团队排名</text>
				<text>{{dataAll.paiming_team}}名</text>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				timevalue: "筛选日期", //选择的日期
				show: false,
				value1: Number(new Date()),
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					dataLabel: true, //是否显示图表区域顶部的总数据
					color: ["#3476fe", "#99C1FF", "#3476fe", "#99C1FF", "#3476fe", "#99C1FF", "#3476fe", "#99C1FF",
						"#3476fe"
					],
					padding: [20, 15, 15, 5],
					legend: { //图例配置
						show: false, //是否显示图例配置
						fontColor: "#fff", //字体颜色
						position: "top",
						float: "right",
					},
					xAxis: { //x轴
						axisLine: false, //x轴坐标轴线是否绘制
						disableGrid: true, //true不显示横线线，false显示横线
						fontColor: "#333", //文字颜色
						//rotateLabel: true //文字旋转
					},
					yAxis: { //y轴
						disableGrid: false, //true不显示横线线，false显示横线
						gridType: "dash", //横线类型
						dashLength: 16, //当为虚线时虚线的长度
						data: [{
							min: 0, //起始值
							fontColor: "#999",
							axisLine: false, //y轴坐标轴线是否绘制
						}],
					},
					extra: {
						column: {
							type: "group",
							width: 30, //每个柱状得宽度
							activeBgColor: "#fff",
							activeBgOpacity: 0.08,
							barBorderCircle: false, //顶部是否为圆角
							barBorderRadius: [5, 5, 0, 0], //自定义4个圆角半径[左上,右上,右下,左下]（请关闭上面按钮（需要将barBorderCircle设为false））
						}
					}
				},
				listid: "",
				dataAll: {
					name: "", //姓名
					shouru: "", //总收入
					gongsi: "",
					pid: 0,
					yue: 0, //本月收入
					nian: 0, //本年收入
					kehu: 0, //客户数量
					nkehu: 0, //新增客户数量
					paiming_gs: 0, //公司内排名
					paiming_team: 0 //团队内排名
				}
			}
		},
		onLoad(options) {
			this.listid = options.id
		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				httpRequest.request('/appapi/staff/user/myyuangongxq', 'POST', {
					id: this.listid,
					times: this.timevalue == "筛选日期" ? "" : this.timevalue
				}).then(res => {
					this.dataAll = res.data
					let data = {
						categories: ["销售额", "客户数量"],
						series: [{
							name: "",
							data: [{
								color: "#3476fe",
								value: res.data.xiaoshoue
							}, {
								color: "#99C1FF",
								value: res.data.kehu
							}]
						}, ]
					};
					this.chartData = JSON.parse(JSON.stringify(data));
				})
			},
			// 时间选择点击确定
			confirm(e) {
				this.show = false
				this.timevalue = this.date(e.value)
				this.init()
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day

				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 时间选择器
	.selectborder {
		border: 3rpx solid #3476fe;
	}

	// 图表
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 500rpx;
	}

	// 内容
	.all-message {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.fourten {
		margin-top: 40rpx;
	}
</style>
